<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>个人主页</title>
    <style type="text/css">
    div#container {
        width:100%;height: 100%;
    }
     div#header {
        position: relative;width: 100%;height: 40px;line-height: 20px;top:0;
        background-image:url(tu.jpg);
        background-repeat: repeat;
        text-align: center;
    }
    div#menu {
        top:40px;
        background-color: #ffff99;
        height: 100%;
        width: 40%;
        float: left;
    }
    div#content {
        top: 40px;
        background-color: #eeeeee;
        height:100%;
        width: 60%;
        float: left;
    }
    div#footer {
        position: absolute;bottom: 0;width: 100%;height: 20px;line-height: 20px;
        background-color: #99bbbb;
        clear: both;
        text-align: center;
    }
    h1 {
        margin-bottom: 0;padding: 5px;
    }
    h2 {
        margin-bottom: 0;
        font-size: 18px;
    }
    ul {
        margin:0;
    }
    li {
        list-style:none;
    }
    </style>
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>个人主页</h1>
        </div>
        <div id="menu">
            <h2>基本信息</h2>
            <ul>
                <li>姓名</li>
                <li>手机</li>
                <li>邮箱</li>
                <li>兴趣爱好</li>
            </ul>
            <h2>教育经历</h2>
            <ul>
                <li>1998.9-2004.6</li>
                <li>2004.9-2007.6</li>
                <li>2007.9-2010.6</li>
                <li>2010.9至今</li>
            </ul>
        </div>
        <div id="content">
            <h2>&nbsp</h2>
            <ul>
                <li>李青霖</li>
                <li>13264712610</li>
                <li>1317971527@qq.com</li>
                <li>书法，羽毛球，电影</li>
            </ul>
            <h2>&nbsp</h2>
            <ul>
                <li>向阳小学</li>
                <li>澧澹中学</li>
                <li>澧县一中</li>
                <li>华中科技大学</li>
            </ul>
        </div>
        <div id="footer">Copyright LiHP2014</div>
    </div>
</body>

</html>
